/**
 * Created by xukj on 2018/6/8.
 */
import React from 'react';
import {
  View,
  Text,
  TouchableWithoutFeedback,
  Image,
  StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';
import Colors from '../../constants/Colors';
import ImageButton from '../../components/ImageButton';
import { format } from '../../util';

export default class ArticleCellItem extends React.PureComponent {
  render() {
    const { article } = this.props.data;
    return (
      <TouchableWithoutFeedback>
        <View style={{flex: 1, backgroundColor: 'white'}}>
          {this._renderTextOnlyStyle(article)}
          {this._renderFooter(article.footer)}
          <View style={styles.sp} />
        </View>
      </TouchableWithoutFeedback>
    );
  }

  // 纯文字样式
  _renderTextOnlyStyle = (article) => {
    return (
      <View style={styles.container}>
        <Text style={styles.title} numberOfLines={2} >{article.content.title}</Text>
        <Text style={styles.content} numberOfLines={3}>{article.content.content}</Text>
      </View>
    );
  };

  // 图片样式
  _renderTextImageStyle = () => {

  };

  // 视频样式
  _renderVideoStyle = () => {

  };

  _renderFooter = (footer) => {
    const agree = footer.agree.toDollarString();
    const comment = footer.comment.toDollarString();
    return (
      <View style={styles.footer}>
        <Text style={{flex: 1,}}>{agree}赞同 · {comment}评论</Text>
        <ImageButton containerStyle={{backgroundColor: 'red', width: 20, height: 20}} />
      </View>
    );
  };
}

// 计算文章高度
export const getArticleHeight = (data) => {

};

ArticleCellItem.propTypes = {
  data: PropTypes.object,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    paddingLeft: 14,
    paddingRight: 14,
    paddingTop: 14,
  },
  title: {
    fontSize: 16,
    color: Colors.black01,
  },
  image: {
    width: 120,
    height: 90,
    borderRadius: 4,
    backgroundColor: Colors.gray04,
  },
  content: {
    marginTop: 8,
    color: Colors.gray01,
    fontSize: 14,
  },
  tips: {

  },
  video: {

  },
  footer: {
    flex: 1,
    flexDirection: 'row',
    height: 20,
    justifyContent: 'flex-end',
    alignItems: 'center',
    marginTop: 8,
    paddingLeft: 14,
    paddingRight: 14,
    marginBottom: 14,
  },
  sp: {
    height: 10,
    backgroundColor: Colors.gray05,
  }
});